<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.liit.util.PropertiesUtils"%>
<%@ page import="java.net.URLEncoder"%>
<%@ page import="cn.liit.weixin.core.config.Config"%>
<%request.setAttribute("vEnter", "\r\n");//处理换行%> 
<!DOCTYPE html>
<html>
<head>
<title>活动详情</title>
<%@include file="/common/wxCommon.jspf"%>
<link rel="stylesheet" href="${ctx }/css/org.css">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<!-- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
</head>
<body class="party-detail">
	<input type="hidden" id="partyId" value="${param.partyId}">
			<div class="weui_tab">
				<div class="weui_navbar">
					<a href="#party-info" class="weui_navbar_item weui_bar_item_on"> 活动信息 </a>
					<a href="#party-sign" class="weui_navbar_item"> 报名人 </a>
					<a href="#party-attend" class="weui_navbar_item"> 签到人 </a>
					<a href="#party-comment" class="weui_navbar_item"> 评价 </a>
				</div>
				<div class="weui_tab_bd">
					<div id="party-info" class="weui_tab_bd_item weui_tab_bd_item_active">
						<div class="party-info">
							<div class="weui_cells weui_cells_form">
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">活动类型</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${partyFormMap.type }</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">活动主题</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${partyFormMap.subject }</p>
									</div>
								</div>
								
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">预计规模</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${ partyFormMap.expectPerson}</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">已报名数</label>
									</div>
									<div class="weui_cell_bd gray">
										<p style="color: red">${signs }人</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">联&nbsp;&thinsp;系&nbsp;&thinsp;人</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${partyFormMap.contact }</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">联系方式</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${partyFormMap.phone }</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">注意事项</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${partyFormMap.notice }</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">参与对象</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${partyFormMap.attendTarget }</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd ">
										<label class="weui_label">活动详情</label>
									</div>
									<div class="weui_cell_bd weui_cell_primary gray">
										<p>${fn:replace(partyFormMap.description,vEnter,"<br>")}</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd">
										<label class="weui_label">活动地址</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${partyFormMap.province} ${partyFormMap.city} ${partyFormMap.area} ${partyFormMap.street}</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd">
										<label class="weui_label">活动详细<br/>地址</label>
									</div>
									<div class="weui_cell_bd gray">
										<p>${partyFormMap.address }</p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd">
										<label class="weui_label">开始时间</label>
									</div>
									<div class="weui_cell_bd gray">
										<p><fmt:formatDate value="${partyFormMap.startTime }" pattern="yyyy-MM-dd HH:mm"/></p>
									</div>
								</div>
								<div class="weui_cell">
									<div class="weui_cell_hd">
										<label class="weui_label">结束时间</label>
									</div>
									<div class="weui_cell_bd gray">
										<p><fmt:formatDate value="${partyFormMap.endTime }" pattern="yyyy-MM-dd HH:mm"/></p>
									</div>
								</div>
								<c:if test="${not empty partyFormMap.partyImage }">
								<div class="weui_cell">
									<div class="weui_cell_hd">
										<label class="weui_label">活动图片</label>
									</div>
									<div class="weui_cell_bd weui_cell_primary">
										<div class="weui_uploader">
											<div class="weui_uploader_bd">
												<ul class="weui_uploader_files">
													<li class="weui_uploader_file"
														style="background-image: url(${ctx}/upload/party/${partyFormMap.partyImage })"></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								</c:if>
								<div class="weui_cell">
									<div class="weui_cell_bd gray">
										${partyFormMap.detail }
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 活动评价 -->
					<div id="party-comment" class="weui_tab_bd_item">
						<div class="weui_cells">
						</div>
						<div class="weui-infinite-scroll">
							<!-- <div class="infinite-preloader"></div> -->
						</div>
					</div>
					<!-- 活动报名人 -->
					<div id="party-sign" class="weui_tab_bd_item">
						<div class="weui_cells">
						</div>
						<div class="weui-infinite-scroll">
							<!-- <div class="infinite-preloader"></div> -->
						</div>
					</div>
					<!-- 活动参与人 -->
					<div id="party-attend" class="weui_tab_bd_item">
						<div class="weui_cells">
						</div>
						<div class="weui-infinite-scroll">
							<!-- <div class="infinite-preloader"></div> -->
						</div>
					</div>
				</div>
			</div>
	<script>
		$(function(){
			/**加载评论*/
			var LoadComment = {
				loading:false,
				params:{pageNo:1, pageSize:10, partyId:$("#partyId").val()},
				load:function(success){
					$.getJSON(rootPath+"/weixin/organ/party/getComment.shtml",LoadComment.params,function(page){
						var records = page['records']
						$(records).each(function(index,data){
							$("#party-comment .weui_cells")
							.append(
								"<a href='javascript:;' class='open-popup' style='color:initial' data-target='#popup_"+data.id+"'>"+	
								"<div class=\"weui_cell\">"
									+ "<div class=\"weui_cell_hd\"><img src=\"" + data.headImgUrl + "\" class=\"user_head\"></div>"
									+"<div class=\"weui_cell_bd weui_cell_primary\">"
										+"<p class='ellipsis'>"+data.comment+"</p>"
										+"<p class='size12 gray'>"
										+new Date(data.commentTime).format("yyyy-MM-dd hh:mm:ss")
										+"&nbsp;&nbsp;"+data.nickname
										+"</p>"
									+"</div>"
									+"<div class=\"weui_cell_ft\">"
										+"<div class='star'><div class='lightstar star"+data.starLevel+"'></div></div>"
									+"</div>"
								+"</div>"
								+"</a>");
							$(document.body).append(
									"<div id=\"popup_"+data.id+"\" class=\"weui-popup-container\">"
										+"<div class=\"weui-popup-modal\">"
											+"<article class=\"weui_article\">"
												+"<h1>"+data.nickname+" 的评论</h1>"
												+"<section>"
												/* +"<h2 class=\"title\">章标题</h2>" */
													+"<p class=''>"+data.comment+"</p>"
												+"</section>"
												+"<section>"
													+"<a href=\"javascript:;\" class=\"weui_btn weui_btn_plain_primary close-popup\">关闭</a>"
												+"</section>"
											+"</article>"
										+"</div>"
									+"</div>");
						});
						if(page.pageNow == page.pageCount){
							$("#party-comment").destroyInfinite();
							$("#party-comment .weui-infinite-scroll").hide();	
						}
						LoadComment.loading = false;
						if(typeof callback =="function"){
							callback();
						}
					});
				}
			}
			/**加载参与人*/
			var LoadAttend = {
				loading:false,
				params:{pageNo:1, pageSize:10, partyId:$("#partyId").val()},
				load:function(success){
					$.getJSON(rootPath+"/weixin/organ/party/getAttend.shtml",LoadAttend.params,function(page){
						var records = page['records'];
						console.info(records)
						$(records).each(function(index,data){
							$("#party-attend .weui_cells")
							.append(
								"<div class=\"weui_cell\">"
									+ "<div class=\"weui_cell_hd\"><img src=\"" + data.headImgUrl + "\" class=\"user_head\"></div>"
									+"<div class=\"weui_cell_bd weui_cell_primary\">"
										+"<p>"+data.nickname+"</p>"
										+"<p class='size12 gray'>"+new Date(data.createTime).format("yyyy-MM-dd hh:mm:ss")+"</p>"
									+"</div>"
									+"<div class=\"weui_cell_ft\">"
										/* +"<div class='star'><div class='lightstar star"+data.starLevel+"'></div></div>" */
									+"</div>"
								+"</div>");
						});
						if(page.pageNow == page.pageCount){
							$("#party-attend").destroyInfinite();
							$("#party-attend .weui-infinite-scroll").hide();	
						}
						LoadAttend.loading = false;
						if(typeof callback =="function"){
							callback();
						}
					});
				}
			}
			
			/**加载报名人*/
			var LoadSign = {
				loading:false,
				params:{pageNo:1, pageSize:10, partyId:$("#partyId").val()},
				load:function(success){
					$.getJSON(rootPath+"/weixin/organ/party/getSign.shtml",LoadAttend.params,function(page){
						var records = page['records'];
						console.info(records)
						$(records).each(function(index,data){
							$("#party-sign .weui_cells")
							.append(
								"<div class=\"weui_cell\">"
									+ "<div class=\"weui_cell_hd\"><img src=\"" + data.headImgUrl + "\" class=\"user_head\"></div>"
									+"<div class=\"weui_cell_bd weui_cell_primary\">"
										+"<p>"+data.nickname+"</p>"+
										"</p><label class='size12 gray'>("+data.name+"、"+data.mobile+")</label></p>"
										+"<p class='size12 gray'>"+new Date(data.createTime).format("yyyy-MM-dd hh:mm:ss")+"</p>"
									+"</div>"
									+"<div class=\"weui_cell_ft\">"
										/* +"<div class='star'><div class='lightstar star"+data.starLevel+"'></div></div>" */
									+"</div>"
								+"</div>");
						});
						if(page.pageNow == page.pageCount){
							$("#party-sign").destroyInfinite();
							$("#party-sign .weui-infinite-scroll").hide();	
						}
						LoadAttend.loading = false;
						if(typeof callback =="function"){
							callback();
						}
					});
				}
			}
			
			// ------------- 初始化滚动加载组件  滚动到距离底部 50 px 的时候会触发加载.
			LoadComment.load();
			$("#party-comment").infinite(0).on("infinite", function() {
				//alert(LoadComment.params.pageNo +"comment")
				if(LoadComment.loading)return;
				LoadComment.params.pageNo++;
				LoadComment.loading = true;
				LoadComment.load(function(){
					LoadComment.loading = false;
				});
			});
			
			LoadAttend.load();
			$("#party-attend").infinite(0).on("infinite", function() {
				if(LoadAttend.loading)return;
				LoadAttend.params.pageNo++;
				LoadAttend.loading = true;
				LoadAttend.load(function(){
					LoadAttend.loading = false;
				});
			});
			
			LoadSign.load();
			$("#party-sign").infinite(0).on("infinite", function() {
				if(LoadAttend.loading)return;
				LoadAttend.params.pageNo++;
				LoadAttend.loading = true;
				LoadAttend.load(function(){
					LoadAttend.loading = false;
				});
			});
		});
		
		//微信分享处理
		wx.ready(function(){
			var signPartyUrl = "<%=String.format(PropertiesUtils.findPropertiesKey("auth.url"), 
								Config.appid, URLEncoder.encode(Config.notifyurl + request.getContextPath()
									+ "/weixin/user/party/signParty.shtml?partyId=" , "UTF-8") + "{0}")%>"
								.replace("{0}", "${partyFormMap.id }");
			var partyImage = "<%=Config.notifyurl  + request.getContextPath()%>/upload/party/${partyFormMap.partyImage }";
			wx.onMenuShareTimeline({
			    title: '${partyFormMap.subject }', // 分享标题
			    link: signPartyUrl, // 分享链接
			    imgUrl: partyImage // 分享图标
			});
			
			wx.onMenuShareAppMessage({
			    title: '${partyFormMap.subject }', // 分享标题
			    desc: '${fn:replace(partyFormMap.description,vEnter,"")}', // 分享描述
			    link: signPartyUrl, // 分享链接
			    imgUrl: partyImage // 分享图标
			});
			
			wx.hideMenuItems({
			      menuList: [ 'menuItem:share:qq', 'menuItem:share:weiboApp',  'menuItem:share:QZone' ]
			});
		});
	</script>
</body>
</html>